<template>
    <div>
        <Tabcomponent></Tabcomponent>
        <PersonalItem>
            <div class="apply">
                <div>买家申请退货退款</div>
                <table>
                    <tr>
                        <td>商品信息</td>
                        <td>包装清单</td>
                        <td>数量</td>
                    </tr>
                    <tr class="tr" >
                        <td>
                            <img src="../assets/img/0FB.png" alt="">
                            <p>3件装 | MEDIHEAL 美迪惠尔 N.M.F针剂水库保湿面膜 10片/盒</p>
                        </td>
                        <td>gucci 包包</td>
                        <td>1</td>
                    </tr>
                </table>
                <div>退款方式： 原支付方式返回</div>
                <div>
                    <span>退款说明：</span>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </div>
                <div>
                    <span>上传图片：</span>
                    <div>
                        <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </div>
                <div>最多可上传5张图片，每张图片大小不超过5M，支持bmp,gif,jpg,png,jpeg格式文件</div>
                <button>提交</button>
            </div>
        </PersonalItem>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'//头部导航
import PersonalItem from "@/components/PersonalItem.vue"
export default {
    components: {
        Tabcomponent,
        PersonalItem
    },
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },
}
</script>

<style lang='scss'>
.apply {
    >div:nth-child(1) {
        font-size: 16px;
    }
    >table {
        border: 1px solid #e5e5e5;
        margin-top: 10px;
         border-collapse: collapse;
        td {
            font-size: 14px;
        }
        >tr {
            >td:nth-child(1) {
                width: 380px;
                text-align: center;
                padding-left: 20px;
            }
            >td:nth-child(2) {
                width: 280px;
                text-align: center;
            }
            >td:nth-child(3) {
                width: 240px;
                text-align: center;
            }
        }
        >tr:nth-child(1) {
            line-height: 40px;
        }
        >.tr {
           cursor: pointer;
            >td {
                font-size: 12px;
                margin: 0;
                border-top: 1px solid #e5e5e5;
                padding: 9px 0;
            }
            >td:nth-child(1) {
                overflow: hidden;
                >img {
                    width: 70px;
                    height: 70px;
                    float: left;
                    vertical-align: top;
                }
                >p {
                    width: 230px;
                    line-height: 18px;
                    float: left;
                    margin-left: 20px;
                    margin-top: 10px;
                }
            }
        }
    }
    >div:nth-child(3) {
        font-size: 14px;
        margin-top: 30px;
    }
    >div:nth-child(4) {
        font-size: 14px;
        overflow: hidden;
        margin-top: 18px;
        >span {
            float: left;
        }
        >textarea {
            float: left;
            width: 440px;
            height: 120px;
            border: 1px solid #bbb;
            outline: none;
            padding: 10px;
        }
    }
    >div:nth-child(5) {
        font-size: 14px;
        overflow: hidden;
        margin-top: 34px;
        >span {
            float: left;
        }
        >div {
            float: left;
        }
    }
    >div:nth-child(6) {
        font-size: 14px;
        margin-top: 18px;
    }
    >button {
        width: 78px;
        height: 26px;
        font-size: 13px;
        background: #000;
        color: #fff;
        margin-top: 30px;
        cursor: pointer;
        margin-left: 80px;
    }
}
.el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 80px;
}
.el-upload--picture-card i {
    font-size: 32px;
}
[class*=" el-icon-"], [class^=el-icon-] {
    line-height: 80px;
}
</style>